<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">车界网</view>
		</view>
		<view class="search_maxbox" :class="scrrol == true ? 'scrrolHeader02' : ''">
			<view class="search_box">
				<view class="city_box" @tap="openAddres">
					<view class="city">{{pickerText}}</view>
					<view class="arrow iconfont icon-shixinjiantouxiangxia"></view>
				</view>
				<view class="search">
					<view class="icon iconfont icon-sousuo"></view>
					<input type="text" v-model="keyword" value="" placeholder="搜索关键字" />
					<view class="menu" @click="search">搜索</view>
				</view>
			</view>
		</view>
		<view class="clear_box"></view>
		<view class="clear_box02"></view>

		<!-- <view class="nav">
			<view class="menu" @click="to_select_model()">
				<view class="text">{{brand_name}}</view>
				<view class="icon iconfont icon-xiala"></view>
			</view>
			<view class="menu">
				<view class="text"></view>
				<picker mode="selector" :range="year_list" @change="onChange">
				    <view class="text">{{year}}</view>
				</picker>
				<view class="icon iconfont icon-xiala"></view>
				
			</view>
			<view class="menu">
				<view class="text">筛选</view>
				<picker mode="selector" :range="screen_list" @change="onChangeScreen">
				    <view class="text">{{screen}}</view>
				</picker>
				<view class="icon iconfont icon-shaixuan-xuanzhong"></view>
			</view>
		</view> -->

		<view class="tips_box">
			<view class="tips_bg">
				<image src="../../static/bg12.png" mode="widthFix"></image>
			</view>
			<view class="title">
				<view class="i iconfont icon-jinggao-F"></view>
				<view class="t">无需手动操作，每天自动同步朋友圈车源！</view>
			</view>
			<view class="text_box" @click="openM" v-if="is_sync == 0">
				<view class="tips">您还未开启“朋友圈车源同步”功能</view>
				<view class="menu">立即开启</view>
			</view>
		</view>

		<view class="rule_box">
			<view class="icon iconfont icon-tongzhi2"></view>
			<swiper class="swiper_box03" :autoplay="true" :interval="3000" :duration="1000" vertical="true">
				<block v-for="(item, index) in notice" :key="index">
					<swiper-item style="height: 100%;">
						<view class="content_text">最近帮“{{item.nickname}}”自动同步{{item.num}}条朋友圈车源</view>
					</swiper-item>
				</block>
			</swiper>
			<!-- <view class="value">最近帮“A澳业批车-阿伟”自动同步2757条朋友圈车源</view> -->
		</view>

		<!-- <scroll-view class="scroll_box" scroll-y="true" @scrolltolower="lower"> -->
			<block v-for="(item,index) in info">
				<view class="circle_list">
					<view class="circle_box">
						<view class="circle_img">
							<image :src="item.headimg" mode="scaleToFill"></image>
						</view>
						<view class="circle_text">
							<view class="name">{{item.nickname}}</view>
							<view class="text" v-if="item.auto_num > 0">近一个月同步朋友圈车源<span>{{item.auto_num}}</span>条</view>
						</view>
						<view class="orientation">{{item.city}}</view>
					</view>
					<view class="circle_value">
						<!-- <view class="type">置顶</view> -->
						<view class="value" v-bind:selectable="true" @longpress="onLongPress(item.content)">{{item.content}}</view>
					</view>
					<view class="circle_picture" v-if="item.thumb && item.thumb.length > 1">
						<block v-for="(item_0,index_0) in item.thumb" :key="index">
							<view class="picture" v-if="index_0 < 2">
								<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
							</view>
							<view class="picture_2" v-if="index_0 == 2 && item.thumb.length > 3">
								<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
								<text class="count">+{{ item.thumb.length - 3 }}</text>
							</view>	
							<view class="picture" v-if="index_0 == 2 && item.thumb.length <= 3">
								<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
							</view>	
						</block>
						<!-- <view class="image-list">
						    <block v-for="(image, index_0) in item.thumb" :key="index">
								<image class="image" :src="image" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
						    </block>
						    <text v-if="item.thumb.length > 3" class="count">+{{ item.thumb.length - 3 }}</text>
						</view> -->
					</view>
					<view class="circle_picture" v-if="item.thumb && item.thumb.length < 2" :style="{ width: '30% !important'}">
						<block v-for="(item_0,index_0) in item.thumb" :key="index">
							<view class="picture">
								<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
							</view>
						</block>
					</view>
					<view class="circle_other">
						<view class="time">{{item.time}}</view>
						<view class="icon_box">
							<view class="icon" @tap="collect(index)">
								<view class="i iconfont icon-shoucang" v-if="item.collect_s == 0"></view>
								<view class="c iconfont icon-shoucang" v-if="item.collect_s > 0"></view>
								<view class="t">收藏</view>
							</view>
							<view class="icon" @tap="contact(item.contact_info)">
								<view class="i iconfont icon-dianhua"></view>
								<view class="t">电话</view>
							</view>
							<view class="icon" @tap="getAllUrl(item.thumb)">
								<view class="i iconfont icon-xiazai"></view>
								<view class="t">下载</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="empty_show">
				<view style="height: 10vh;padding-top: 5vw;text-align: center;">
					<u-empty text="没有更多了" mode="list">没有更多了</u-empty>
				</view>
			</block>
		<!-- </scroll-view> -->
		
		<view class="publish_box" @click="pulish">
			<view class="icon iconfont icon-fabucheyuan"></view>
			<view class="text">发布</view>
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#333"></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				page: 1,
				scrrol: false,
				info: '',
				empty_show:0,
				is_vip:0,
				is_sync:0,
				keyword: '',
				is_load:0,
				brand_id:0,
				brand_name:'车型',
				notice:[],
				year:'年款',
				year_list:[
					'2024','2023','2022','2021','2020','2019','2018','2017','2016','2015','2014','2013','2012','2011','2010','2009','2008','2007','2006','2005',
					'2004','2003','2002','2001','2000','1999','1998','1997','1996','1995'
				],
				screen:'筛选',
				screen_list:[
					'批发','求购','询价'
				],
				car_brand:'',
				car_year:'',
				car_screen:'',
				keyword:'',
				user_call:0,
				call_num:0,
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '全国',
				prov : '',
				city : '',
				area : '',
			}
		},
		onLoad() {
			let that = this;
			uni.$on('get_brand', (data) => {
				if (data == 0) {
					that.brand_id = 0;
					that.brand_name = '车型';
					that.car_brand = '';
				} else {
					that.brand_id = data.id;
					that.brand_name = data.name;
					that.car_brand = data.name;
				}
				this.page = 1;
				this.loadData();
				this.is_load = 1;
			});
			if (this.is_load == 0){
				this.loadData();
			}
			this.loadNotice();
		},
		onShow() {
			let is_publish = uni.getStorageSync('circle_publish');
			if (is_publish){
				uni.removeStorageSync('circle_publish');
				this.loadData();
			}
		},
		methods: {
			setRule(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
				let param = {
					page:that.page,
					brand_name:that.car_brand,
					car_year:that.car_year,
					car_screen:that.car_screen,
					keyword:that.keyword,
					prov:that.prov,
					city:that.city
				};
				that.Net._get('other/dynamic', param, res => {
					if (res.code == 1) {
						that.info = res.data.data;
						that.is_sync = res.data.is_synchronize;
						that.is_vip = res.data.is_vip;
						that.user_call = res.data.user_call;
						that.call_num = res.data.call_num;
						if (that.info.length == 0){
							that.empty_show = 1;
						}
					}
				});
			},
			loadNotice() {
				let that = this;
				that.Net._get('other/dynamic_auto', {}, res => {
					if (res.code == 1) {
						that.notice = res.data.notice;
						that.year_list = res.data.years;
					}
				});
			},
			to_select_model(){
				uni.navigateTo({
					url: '/pages/brand/brand?type=0'
				});
			},
			onChange(e) {
			    this.year = this.year_list[e.detail.value]+'款';
				this.car_year = this.year_list[e.detail.value];
				this.page = 1;
				this.loadData();
			},
			onChangeScreen(e){
				this.screen = this.screen_list[e.detail.value];
				this.car_screen = this.screen_list[e.detail.value];
				this.page = 1;
				this.loadData();
			},
			search(){
				if (this.keyword == '') {
					this.Msg.Fail('请输入搜索关键字');
					return '';
				}
				this.page = 1;
				this.loadData();
			},
			pulish(){
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					let token = uni.getStorageSync('_TOKEN_')
					if (!token) {
						uni.showModal({
						    title: '温馨提示',
						    content: '您还未登录，请先登录',
							cancelText:'暂不登录',
							confirmText:'去登录',
						    success: function (res) {
						        if (res.confirm) {
									uni.navigateTo({
										url: '/pages/public/login'
									});
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						            // 用户点击了取消按钮的相关逻辑可以放在这里
						        }
						    }
						})
						return '';
					}
				}
				uni.navigateTo({
					url: '/pages/circle/publish'
				});
			},
			openM(){
				if (this.is_vip == 1){
					uni.navigateTo({
						url: '/pages/goods/synchronization'
					});
				}else{
					uni.navigateTo({
						url: '/pages/personalcenter/member/member'
					});
				}
			},
			collect(index){
				let that = this;
				let cid = that.info[index].id;
				that.Net._post('auth/team/collect', {id:cid,is_type:1}, res => {
					if (res.code == 1) {
						var msg = '收藏成功';
						if (res.data == 1){
							this.collect_s = 1;
							this.info[index].collect_s = 1;
						}else{
							this.collect_s = 0;
							this.info[index].collect_s = 0;
							msg = '取消成功';
						}
						that.Msg.Success(msg, res => {
							
						});
					}
				});
			},
			contact(phone){
				let that = this;
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.navigateTo({
						url: '/pages/public/login'
					});
					return '';
				}
				if (that.is_vip == 0 && that.user_call >= that.call_num){
					uni.showModal({
					    title: '此功能仅限会员使用，开通vip可无限次数联系',
					    content: '',
						confirmText:'去开通',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/personalcenter/member/member'
								});
								return '';
					        } else if (res.cancel) {
								
					        }
					    }
					})
					return '';
				}
				uni.showModal({
				    title: '联系车商',
				    content: phone,
					confirmText:'拨打',
				    success: function (res) {
				        if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
							that.Net._post('auth/team/call_num', {id:0}, res => {
								
							});
				        } else if (res.cancel) {
							
				        }
				    }
				})
			},
			getAllUrl(away) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否一键下载',
					success: function(res) {
						if (res.confirm) {
							for (var z = 0; z < away.length; z++) {
								uni.downloadFile({
									url: away[z],
									success: (res) => {
										// 2 成功下载后而且状态码为200时将视频保存到本地系统
										if (res.statusCode === 200) {
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
												},
												fail: function() {
													uni.showToast({
														title: "保存失败",
														icon: "none"
													});
												}
											});
										}
									},
								})
							}
			
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			
			},
			openPreviewImage(e,index) {
				let that = this;
				let img_ = e;
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: img_,
					loop:true
					/* longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					} */
				});
			},
			openAddres() {
				this.cityPickerValueDefault = [0, 0, 1];
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				let that = this;
				let pickerText = e.label.split('-');
				that.prov = pickerText[0];
				that.city = pickerText[1];
				that.area = pickerText[2];
				if (pickerText[1] == '市辖区'){
					that.city = pickerText[0];
					that.area = pickerText[1];
				}
				that.pickerText = that.city;
				that.pageinit();
			},
			pageinit() {
				this.page = 1;
				this.info = [];
				this.loadData();
			},
			onLongPress(e) {
			    // 在这里可以执行复制操作
			    uni.setClipboardData({
			        data: e,
			        success: () => {
						console.log('复制成功');
						// 可以弹窗提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
						},
			        fail: () => {
						console.log('复制失败');
			        }
			    });
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			let that = this;
			setTimeout(function() {
				uni.stopPullDownRefresh();
				that.page = 1;
				that.loadData();
			}, 500);
		},
		onReachBottom() {
			var that = this;
			that.page++;
			let param = {
				page:that.page,
				brand_name:that.car_brand,
				car_year:that.car_year,
				car_screen:that.car_screen,
				keyword:this.keyword,
				prov:that.prov,
				city:that.city
			};
			that.Net._get('other/dynamic', param, res => {
				if (res.code == 1) {
					if (res.data.data == '') {
						uni.showToast({
							title: '没有更多内容了',
							duration: 2000,
							icon: 'none'
						});
						that.empty_show = 1;
					} else {
						that.info = that.info.concat(res.data.data); //将数据拼接在一起
					}
				} else if (res.code == 0) {
					that.Msg.Success(res.msg, res => {});
				}
			});
		},
	}
</script>

<style>
	page{
		padding-bottom: 0 !important;
	}
	.header {
		/* background-color: transparent !important; */
	}

	.header .text {
		/* background-color: transparent !important; */
		color: #fff !important;
	}

	.scrrolHeader02 {
		background-color: #fff !important;
	}

	.clear_box02 {
		width: 100%;
		height: calc(12vw + var(--status-bar-height));
	}

	.search_maxbox {
		width: 100%;
		padding: 3vw 4%;
		position: fixed;
		left: 0;
		top: calc(13.4vw + var(--status-bar-height));
		z-index: 98;
	}

	.search_box {
		width: 100%;
		border-radius: 2vw;
		border: 1px solid #FC5D20;
		display: flex;
		align-items: center;
		height: 12vw;
		padding-left: 2vw;
	}

	.search_box .city_box {
		display: flex;
		align-items: center;
		padding: 0 2vw;
		border-right: 1px solid #E8E8F0;
		margin-right: 2vw;
	}

	.search_box .city_box .city {
		font-size: 3.8vw;
		color: #979AA9;
		margin-right: 1vw;
	}

	.search_box .city_box .arrow {
		font-size: 3vw;
		color: #979AA9;
	}

	.search_box .search {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.search_box .search .icon {
		font-size: 4vw;
		color: #979AA9;
		margin-right: 2vw;
	}

	.search_box .search input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
	}

	.search_box .search .menu {
		font-size: 4vw;
		height: 9vw;
		width: 16vw;
		color: #fff;
		background-color: #FE811E;
		border-radius: 2vw;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 1.5vw;
	}

	.rule_box {
		width: 100%;
		height: 10vw;
		background-color: #FEF6EB;
		display: flex;
		align-items: center;
		padding: 0 4%;
		margin-top: 5px;
	}

	.rule_box .icon {
		font-size: 5vw;
		color: #FF6B23;
		margin-right: 2vw;
	}

	.rule_box .value {
		flex: 1;
		font-size: 3.5vw;
		color: #FF6B23;
		margin-right: 2vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.rule_box .add {
		font-size: 3.5vw;
		color: #FF6B23;
		margin-right: 1vw;
	}

	.rule_box .arrow {
		font-size: 4vw;
		color: #FF6B23;
	}

	.nav {
		width: 92%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 5vw 0;
	}

	.nav .menu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav .menu .text {
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
	}

	.nav .menu .icon {
		font-size: 3vw;
		color: #E6E6E6;
	}

	.tips_box {
		width: 92%;
		margin: 0 auto;
		background-color: #f96e38;
		border-radius: 3vw;
		padding: 1.5vw;
		position: relative;
	}

	.tips_box .tips_bg {
		width: 10vw;
		position: absolute;
		right: 4%;
		top: 1.5vw;
	}

	.tips_box .tips_bg image {
		width: 100%;
	}

	.tips_box .title {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tips_box .title .i {
		font-size: 4vw;
		color: #fff;
		margin-right: 1vw;
	}

	.tips_box .title .t {
		font-size: 3.5vw;
		color: #fff;
	}

	.tips_box .text_box {
		width: 100%;
		margin-top: 1.5vw;
		background-color: #fff;
		border-radius: 3vw;
		display: flex;
		align-items: center;
		padding: 4vw;
	}

	.tips_box .text_box .tips {
		font-size: 3.5vw;
		color: #333;
		flex: 1;
	}

	.tips_box .text_box .menu {
		font-size: 3.5vw;
		color: #fff;
		width: 20vw;
		height: 7vw;
		border-radius: 7vw;
		background: linear-gradient(to right, #FE9229, #FF4F27);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.scroll_box{
		width: 100%;
		height: 57vh;
	}

	.circle_list {
		width: 100%;
		background-color: #fff;
		padding: 4%;
		border-bottom: 1px solid #F7F8FC;
	}

	.circle_list .circle_box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.circle_list .circle_box .circle_img {
		width: 12vw;
		height: 12vw;
		margin-right: 2vw;
	}

	.circle_list .circle_box .circle_img image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}

	.circle_list .circle_box .circle_text {
		flex: 1;
	}

	.circle_list .circle_box .circle_text .name {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
	}

	.circle_list .circle_box .circle_text .text {
		font-size: 3.5vw;
		color: #999999;
		margin-top: 1vw;
	}

	.circle_list .circle_box .circle_text .text span {
		color: #FF6A23;
	}

	.circle_list .circle_box .orientation {
		font-size: 3.6vw;
		color: #999999;
	}

	.circle_list .circle_value {
		margin-top: 2vw;
		display: flex;
	}

	.circle_list .circle_value .type {
		width: 10vw;
		height: 5vw;
		font-size: 3vw;
		color: #fff;
		background-color: #FF5227;
		margin-right: 1vw;
		border-radius: 1vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle_list .circle_value .value {
		font-size: 3.7vw;
		color: #333;
		font-weight: bold;
	}

	.circle_list .circle_picture {
		width: 100%;
		margin-top: 2vw;
		display: flex;

	}

	.circle_list .circle_picture .picture {
		flex: 1;
		height: 30vw;
		margin-left: 1vw;
	}

	.circle_list .circle_picture .picture:nth-child(1) {
		margin-left: 0;
	}

	.circle_list .circle_picture .picture image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}
	
	.circle_list .circle_picture .picture_2 {
		flex: 1;
		height: 30vw;
		margin-left: 1vw;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.circle_list .circle_picture .picture_2:nth-child(1) {
		margin-left: 0;
	}
	
	.circle_list .circle_picture .picture_2 image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
		opacity: 0.5;
	}

	.circle_list .circle_other {
		width: 100%;
		margin-top: 3vw;
		display: flex;
		align-items: center;
	}

	.circle_list .circle_other .time {
		font-size: 3.8vw;
		color: #999;
	}

	.circle_list .circle_other .icon_box {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end
	}

	.circle_list .circle_other .icon_box .icon {
		width: 16vw;
		display: flex;
		align-items: center;
	}

	.circle_list .circle_other .icon_box .icon .i {
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
	}

	.circle_list .circle_other .icon_box .icon .t {
		font-size: 3.6vw;
		color: #333;
		font-weight: bold;
	}
	
	.circle_other .icon_box .icon .c {
		font-size: 3.6vw;
		color: #FF9800;
		font-weight: bold;
	}
	.publish_box{
		width: 24vw;
		height: 11vw;
		border-radius: 11vw;
		padding: 0 1.5vw;
		background: linear-gradient(to right, #FE9229, #FF4F27);
		display: flex;
		align-items: center;
		position: fixed;
		right: calc(50% - 12vw);
		bottom: 10vh;
		z-index: 98;
	}
	
	.publish_box .icon{
		width: 8vw;
		height: 8vw;
		border-radius: 50%;
		background-color: #fff;
		font-size: 4vw;
		color: #FE9129;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.publish_box .text{
		flex: 1;
		font-size: 3.5vw;
		color: #fff;
		font-weight: bold;
		text-align: center;
	}
	
	/* .image-list {
	  display: flex;
	  flex-wrap: wrap;
	}
	.image {
	  width: 100px;
	  height: 100px;
	  margin: 3px;
	} */
	.count {
		position: relative;
		top: -60%; /* Adjust this value based on the size of your images */
		left: 50%; /* Adjust this value based on the size of your images */
		color: white;
		/* background-color: rgba(0, 0, 0, 0.5); */
		/* border-radius: 50%; */
		/* width: 50px;
		height: 50px;
		line-height: 50px; */
		/* text-align: center; */
		font-size: 20px;
	}
	
	.swiper_box03 {
		width: 100%;
		height: 5.5vw;
	}
	.content_text {
		flex: 1;
		font-size: 3.5vw;
		color: #FF6B23;
		margin-right: 2vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		
		
	}
</style>